<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          clearable
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'time'">
                <el-date-picker v-model="state.params[item.key]"
                                type="daterange"
                                value-format="YYYY-MM-DD"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                :placeholder="item.label" />
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'companyId'">
                  <el-option />
                </el-select>

                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'whetherEdit'">
                  <el-option label="是"
                             value="是" />
                  <el-option label="否"
                             value="否" />
                </el-select>

              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox flex">
        <el-table border
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }"
                  v-loading="state.loading">
          <el-table-column prop="name"
                           label="姓名/昵称"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="date"
                           label="日期	"
                           show-overflow-tooltip
                           align="center">

          </el-table-column>
          <el-table-column prop="phone"
                           label="手机号"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="status"
                           label="当日状态"
                           show-overflow-tooltip
                           align="center">
            <template #default="scope">
              <div class="flex">
                <div v-if="scope.row.sourceStatus == 0"
                     class="success">休假</div>
                <div v-if="scope.row.sourceStatus == 1"
                     class="primary">打卡</div>
                <div v-if="scope.row.sourceStatus == 3"
                     class="warning">未到岗</div>
                <div v-if="scope.row.sourceStatus == 2"
                     class="info">离职</div>
                <div v-if="scope.row.whetherEdit !== '否'"
                     class="flex">
                  &emsp; --> &emsp;
                  <div v-if="scope.row.status == 0"
                       class="success">休假</div>
                  <div v-if="scope.row.status == 1"
                       class="primary">打卡</div>
                  <div v-if="scope.row.status == 3"
                       class="error">未到岗</div>
                  <div v-if="scope.row.status == 2"
                       class="info">离职</div>
                </div>
              </div>

            </template>
          </el-table-column>

        </el-table>

      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>
      <div class="mt20 border_box">
        <div class="f14 fb  error">
          下载查看凭证
        </div>
        <div class="downloadBox">

          <div v-for="(i,k) in state.proveUrl"
               :key="k"
               class="cup primary mt10"
               @click="methods.download(i)">
            {{ i.name}}
          </div>

        </div>
        <div class="flex w50 mt10">
          <el-radio-group v-model="state.approveStatus"
                          :disabled="state.dataDatelis.approveStatus != 1"
                          class="ml-4 flex">
            <el-radio :label="2"
                      size="large">通过</el-radio>
            <el-radio :label="3"
                      size="large">拒绝 </el-radio>
          </el-radio-group>
          <el-input v-model="state.approveOpinion"
                    v-if="state.approveStatus == 3"
                    clearable
                    class="mt20"
                    :disabled="state.dataDatelis.approveStatus != 1"
                    type="textarea"
                    rows="3"
                    maxlength="300"
                    show-word-limit
                    placeholder="请输入拒绝理由"></el-input>

        </div>
        <div class="mt20 tar">
          <el-button v-preventReClick
                     type="primary"
                     plain
                     @click="$router.push('/clockln/examine')">取消</el-button>
          <el-button v-preventReClick
                     type="primary"
                     @click="methods.btnSubmit"
                     v-if="state.dataDatelis.approveStatus == 1">审核</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    proveUrl: [],
    approveOpinion: '',
    approveStatus: null,
    loading: false,
    propsCity: [],
    dialogImg: false,
    dialogImgData: null,
    previewImgData: [],
    dialogDescribeData: null,
    dialogDescribe: false,
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      recordId: app.$route.query.recordId,
    },
    totalInputColumns: [
      { key: "name", label: "姓名", type: "input" },
      { key: "date", label: "选择日期 ", type: "time" },
      { key: "whetherEdit", label: "是否修改 ", type: "select" },
    ],
    totalInputColumnsOption: {
      cityList: [],
      position: [],
      positionType: [],
    },
    dataDatelis: {},
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
  methods.geturl();

});
const methods = {
  download (i) {
    // app.$parse.downloadFile(i.url, i.name)
    // window.open(i.url)
    methods.download(i.url, i.name)
  },

  download (file) {
    //下载
    var x = new XMLHttpRequest();
    x.open('GET', file.url, true);
    x.responseType = 'blob';
    x.onload = function (e) {
      var url = window.URL.createObjectURL(x.response);
      const link = document.createElement('a');
      link.target = '_blank';
      link.href = url;
      link.download = file.name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };
    x.send();
  },

  btnSubmit () {
    if (state.approveStatus == 1) {
      return ElMessage.error('请选择审核状态')
    }
    if (state.approveStatus == 3 && state.approveOpinion == '') {
      return ElMessage.error('请输入拒绝理由')
    }
    app.$post('companyCheckAttendanceRecord/approve', {
      rid: app.$route.query.rid,
      approveOpinion: state.approveOpinion,
      approveStatus: state.approveStatus
    }).then(res => {
      if (res.code == 200) {
        ElMessage.success('操作成功')
        app.$router.push('/clockln/examine')
      }
    })
  },
  geturl () {
    app.$get('/companyCheckAttendanceRecord/plat/query', {
      uid: JSON.parse(localStorage.getItem('userInfor')).uid,
      rid: app.$route.query.rid,
      pageNum: 1,
      pageSize: 10,
    }).then(res => {
      console.log(res.data.data[0].proveUrl);
      if (res.data.data[0].proveUrl) {
        state.proveUrl = JSON.parse(res.data.data[0].proveUrl)
        state.dataDatelis = res.data.data[0]
        state.approveStatus = res.data.data[0].approveStatus
        state.approveOpinion = res.data.data[0].approveOpinion
      }
    })
  },
  handleAction (type, data) {
    switch (type) {
      case "export": //导出
        methods.export();
        break;
      case "detail": //导出
        app.$router.push('/clockinDetail?id=' + data.id)
        break;
      case "vacation": //休假
        methods.tableBtns(data, 0)
        break;
      case "clock": //打卡
        methods.tableBtns(data, 1)
        break;
      case "wdg": //未到岗
        methods.tableBtns(data, 3)
        break;
      case "depart": //离职
        methods.tableBtns(data, 2)
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "edit": // 编辑
        router.push("/positionAdd?id=" + data.id);
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该招聘职位?", "删除招聘职位", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/position/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });

        break;
    }
  },
  tableBtns (data, index) {
    app.$http.post('/sys/companystaff/company/signin/handle', { id: data.id, status: index }).then(res => {
      if (res.code == 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        methods.getDataList()
      }
    })
  },
  // 导出
  export () {
    app.$http
      .post(
        `sys/companystaff/exportPlatPageInfo`, state.params,
        { responseType: "arraybuffer" }
      )
      .then((res) => {
        if (res) {
          app.$parse.downloadExcel(res, '打卡管理数据')
        }
      });

  },

  // 企业签到|修改|离职接口
  operates (id, status) {
    app.$http
      .post("/sys/companystaff/company/signin/handle", {
        id: id,
        status: status,
      })
      .then((res) => { });
  },
  getDataList () {
    state.loading = true;
    let data = JSON.parse(JSON.stringify(state.params))
    data.date = data.date ? data.date.join() : ""
    app.$get
      ("/companyCheckAttendanceRecord/queryAttendance?", data)
      .then((res) => {
        if (res.data) {
          state.tableData = res.data.data;
          state.totalSize = res.data.total;
        }
        state.loading = false;
      })
      .catch(() => {
        state.loading = false;
      });
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.downloadBox {
  display: flex;
  flex-direction: column;
  div {
    align-self: baseline;
  }
}
.border_box {
  padding: 20px;
  border-top: 2px solid #ccc;
}
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }
}
</style>
